﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>冰与火之歌中的维斯特洛大陆地图</title>
    <style type="text/css">
        #myMap {
            height: 1000px;
            width: 700px;
        }
    </style>

    <style>
        body, div, ul, li {
            margin: 0;
            padding: 0;
            font-style: normal;
            font: 12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif;
        }
        /* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
        ol, ul, li {
            list-style: none;
        }

        img {
            border: 0;
            vertical-align: middle;
        }

        body {
            color: #000000; /*background:#FFF;*/
            text-align: center;
        }

        .clear {
            clear: both;
            height: 1px;
            width: 100%;
            overflow: hidden;
            margin-top: -1px;
        }

        a {
            color: #000000;
            text-decoration: none;
        }

            a:hover {
                color: #BA2636;
            }

        .red, .red a {
            color: #F00;
        }

        .lan, .lan a {
            color: #1E51A2;
        }

        .pd5 {
            padding-top: 5px;
        }

        .dis {
            display: block;
        }

        .undis {
            display: none;
        }

        ul#nav {
            width: 100%;
            height: 60px;
            background: #00A2CA;
            margin: 0 auto;
        }

            ul#nav li {
                display: inline;
                height: 60px;
            }

                ul#nav li a {
                    display: inline-block;
                    padding: 0 20px;
                    height: 60px;
                    line-height: 60px;
                    color: #FFF;
                    font-family: "\5FAE\8F6F\96C5\9ED1";
                    font-size: 16px;
                }

                    ul#nav li a:hover {
                        background: #0095BB;
                    }
    </style>
  
    <link rel="stylesheet" href="/leaflet.css" />
    <script src="/leaflet.js" type="text/javascript"></script>
   
</head>

<body background="/image/Mapback.jpg" style="background-repeat: no-repeat; background-size:100% 100%;background-attachment:fixed ">
    
    <ul id="nav">
    <li><a href="/homePage.html">首页</a></li>
    <li><a href="/Map.html">维斯特洛地图</a></li>
    <li><a href="/badge.html">家族徽章查看</a></li>
    <li><a href="/seson.html">分季简介</a></li>

</ul>
    <script type="text/javascript">
        alert("欢迎来到维斯特洛! \n Valar Morghulis!");
      
        window.onload = function () {
            // 自定义图片
            var mymap = L.map('myMap', {
                crs: L.CRS.Simple,
                minZoom: -1
            });
            var bounds = [
                [0, 0],
                [2921, 1232]
            ];
            L.imageOverlay('GameofThrones.jpg', bounds).addTo(mymap);
            mymap.fitBounds(bounds);
        }
    </script>
    <div id="myMap" style="text-align:center;margin-left:auto;margin-right:auto;margin-top:20px"></div>    
</body>
</html>